<div class="kbn-timepicker">

  <div class="tab-content">

    <!-- Filters -->
    <div ng-show="activeTab === 'filter'" role="tabpanel" class="tab-pane active">
      <div class="kuiLocalDropdownTitle">Time Range</div>
      <div class="row">
        <div class="col-md-2">
          <ul class="nav nav-pills nav-stacked kbn-timepicker-modes">
            <li ng-class="{active: mode === 'quick' }">
              <a ng-click="setMode('quick')">quick</a>
            </li>
            <li ng-class="{active: mode === 'relative' }">
              <a ng-click="setMode('relative')">relative</a>
            </li>
            <li ng-class="{active: mode === 'absolute' }">
              <a ng-click="setMode('absolute')">absolute</a>
            </li>
          </ul>
        </div>

        <div class="col-md-10">
          <div ng-switch on="mode" class="container-fluid">
            <div ng-switch-when="quick">

              <div ng-repeat="list in quickLists" class="kbn-timepicker-section">
                <ul class="list-unstyled">
                  <li ng-repeat="option in list">
                    <a ng-click="setQuick(option.from, option.to)" ng-bind="::option.display"></a>
                  </li>
                </ul>
              </div>

              <!-- TODO: Add a section for custom intervals -->
            </div>

            <div ng-switch-when="relative">
              <form role="form" ng-submit="applyRelative()" class="form-inline" name="relativeTime">
                <div class="kbn-timepicker-section">
                  <label>
                    From:
                    <span ng-show="relative.from.preview">{{relative.from.preview}}</span>
                    <a class="label label-default" ng-click="setRelativeToNow('from')">Set To Now</a>
                    <span ng-hide="relative.from.preview"><i>Invalid Expression</i></span>
                  </label>
                  <br>
                  <div class="form-group" ng-class="{ 'has-error': checkRelative() }">
                    <input
                      required
                      ng-model="relative.from.count"
                      ng-change="formatRelative('from')"
                      greater-than="-1"
                      min="0"
                      type="number"
                      class="form-control">
                  </div>
                  <div class="form-group" ng-class="{ 'has-error': checkRelative() }">
                    <select
                      ng-model="relative.from.unit"
                      ng-options="opt.value as opt.text for opt in relativeOptions"
                      ng-change="formatRelative('from')"
                      class="form-control col-xs-2">
                    </select>
                  </div>
                  <br>
                  <div class="small">
                    <label>
                      <input
                        ng-model="relative.from.round"
                        ng-checked="relative.from.round"
                        ng-change="formatRelative('from')"
                        type="checkbox">
                      round to the {{units[relative.from.unit.substring(0,1)]}}
                    </label>
                    <div
                      ng-class="{ 'kbn-timepicker-error': checkRelative() }"
                      ng-show="checkRelative()">
                      <strong>From</strong> must occur before <strong>To</strong>
                    </div>
                  </div>
                </div>

                <div class="kbn-timepicker-section">
                  <label>
                    To:
                    <span ng-show="relative.to.preview">{{relative.to.preview}}</span>
                    <a class="label label-default" ng-click="setRelativeToNow('to')">Set To Now</a>
                    <span ng-hide="relative.to.preview"><i>Invalid Expression</i></span>
                  </label>
                  <br>
                  <div class="form-group" ng-class="{ 'has-error': checkRelative() }">
                    <input
                      required
                      ng-model="relative.to.count"
                      ng-change="formatRelative('to')"
                      greater-than="-1"
                      min="0"
                      type="number"
                      class="form-control">
                  </div>
                  <div class="form-group" ng-class="{ 'has-error': checkRelative() }">
                    <select
                      ng-model="relative.to.unit"
                      ng-options="opt.value as opt.text for opt in relativeOptions"
                      ng-change="formatRelative('to')"
                      class="form-control col-xs-2">
                    </select>
                  </div>
                  <br>
                  <div class="small">
                    <label>
                      <input
                        ng-model="relative.to.round"
                        ng-checked="relative.to.round"
                        ng-change="formatRelative('to')"
                        type="checkbox">
                      round to the {{units[relative.to.unit.substring(0,1)]}}
                    </label>
                  </div>
                </div>

                <div class="kbn-timepicker-section">
                  <label>&nbsp;</label>
                  <br>
                  <div class="form-group">
                    <button type="submit" class="btn btn-primary kbn-timepicker-go" ng-disabled="!(relative.from.preview && relative.to.preview) || checkRelative()">
                      Go
                    </button>
                  </div>
                </div>
              </form>
            </div>

            <div ng-switch-when="absolute">
              <form name="absoluteTime" ng-submit="applyAbsolute()">
                <div class="kbn-timepicker-section">
                  <div>
                    <label class="small">From: <span ng-show="!absolute.from"><i>Invalid Date</i></span>
                      <a class="label label-default" ng-click="setToNow('from')">Set To Now</a>
                    </label>
                    <input type="text" required class="form-control" input-datetime="{{format}}" ng-model="absolute.from">
                  </div>
                  <div>
                    <datepicker ng-model="pickFromDate" ng-model-options="{ getterSetter: true }" max-date="absolute.to" show-weeks="false"></datepicker>
                  </div>
                </div>

                <div class="kbn-timepicker-section">
                  <div>
                    <label class="small">To:
                      <a class="label label-default" ng-click="setToNow('to')">Set To Now</a>
                    </label>
                    <span ng-show="!absolute.to"><i>Invalid Date</i></span>
                    <input type="text" required class="form-control" input-datetime="{{format}}" ng-model="absolute.to">
                  </div>
                  <div>
                    <datepicker ng-model="pickToDate" ng-model-options="{ getterSetter: true }" min-date="absolute.from" show-weeks="false"></datepicker>
                  </div>
                </div>

                <div class="kbn-timepicker-section kbn-timepicker-alert">
                  <label>&nbsp;</label>
                  <div class="form-group">
                    <button class="btn btn-primary kbn-timepicker-go" ng-disabled="absolute.from > absolute.to || !absolute.from || !absolute.to" type="submit">
                      Go
                    </button>
                    <span class="small" ng-show="absolute.from > absolute.to"><strong>From</strong> must occur before <strong>To</strong></span>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Refresh Intervals -->
    <div ng-show="activeTab === 'interval'" role="tabpanel" class="tab-pane active">
      <div class="kuiLocalDropdownTitle">Refresh Interval</div>
      <div ng-repeat="list in refreshLists" class="kbn-refresh-section">
        <ul class="list-unstyled">
          <li ng-repeat="inter in list">
            <a class="refresh-interval" ng-class="{ 'refresh-interval-active': interval.value === inter.value }" ng-click="setRefreshInterval(inter)">
              {{inter.display}}
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
